<template>
  <el-cascader style="width: 100%;border-bottom-right-radius: 0px" :props="{lazy: true, lazyLoad: lazyLoad, multiple: props.multiple}"  @change="handleChange" v-model="value" />
</template>

<script setup name="x-area">
import useStore from '@/stores/framework/area';
const store = useStore();
let value = ref([]);
let area = ref([]);
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  multiple: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: [String, Array],
    default: () => {
      return ""
    }
  },
})

onMounted(() => {
  store.getAreaList();
})

const lazyLoad = async (node, resolve) => {
  resolve(await store.getAreaList(node.value));
}

const handleChange = (val) => {
  let res = [];
  if(! Helper.emptyArray(val)) {
    val.forEach(v => {
      res.push(v[2])
    })
  }
  area.value = res;
}

const format = (area) => {
  let res = [];
  if(! Helper.emptyArray(area)) {
    area.forEach(a => {
      let item = [];
      item.push(a.substr(0, 2) + "0000000000")
      item.push(a.substr(0, 4) + "00000000")
      item.push(a);
      res.push(item);
    })
  }

  value.value = res;
}

/**
 * watch  监听
 */
watch(() => props.modelValue, (val) => {
  area.value = val;
  format(val);
}, {immediate: true, deep: true})

/**
 * watch  监听
 */
watch(() => area, (val) => {
  emit('update:modelValue', val);
}, { deep: true})
</script>

<style scoped>

</style>
